<template>
  <div>
    <div v-if="showbutton"> <el-button @click="submit()"> 填报</el-button></div>
    <table style="width: 100%" border="1" cellspacing="1">
      <tbody>
        <tr>
          <td colspan="1">营地名称</td>
          <td colspan="8"><input type="text" v-model="dataform.orgName" /></td>
        </tr>
        <tr>
          <td colspan="1">主管单位</td>
          <td colspan="4"><input type="text" v-model="dataform.masterOrgName" /></td>
          <td colspan="2">法人代表</td>
          <td colspan="2"><input type="text" v-model="dataform.legalPerson" /></td>
        </tr>
        <tr>
          <td colspan="1">网站地址(选填)</td>
          <td colspan="4"><input type="text" v-model="dataform.intAddress" /></td>
          <td colspan="2">固定电话</td>
          <td colspan="2"><input type="text" v-model="dataform.staticPhone" /></td>
        </tr>
        <tr>
          <td colspan="1">详细地址</td>
          <td colspan="4"><input type="text" v-model="dataform.address" /></td>
          <td colspan="2">邮政编码</td>
          <td colspan="2"><input type="text" v-model="dataform.postcode" /></td>
        </tr>
        <tr>
          <td colspan="1" rowspan="2">日常负责人</td>
          <td colspan="4" rowspan="2"><input type="text" v-model="dataform.dayResponsibleName" /></td>
          <td colspan="2">手机</td>
          <td colspan="2"><input type="text" v-model="dataform.dayResponsiblePhone" /></td>
        </tr>
        <tr>
          <td colspan="2">电子邮箱</td>
          <td colspan="2"><input type="text" v-model="dataform.dayResponsibleEmail" /></td>
        </tr>
        <tr>
          <td colspan="1" rowspan="2">营地类型(划“√”)</td>
          <td colspan="2">自有</td>
          <td colspan="2">租赁</td>
          <td colspan="2">营地建成时间</td>
          <td colspan="2"><input type="text" v-model="dataform.campingCreateTime" /></td>
        </tr>
        <tr>
          <td colspan="2"><input type="text" v-model="campingTypelist.selfOwned" /></td>
          <td colspan="2"><input type="text" v-model="campingTypelist.lease" /></td>
          <td colspan="2">营地面积</td>
          <td colspan="2"><input type="text" v-model="dataform.campingAcreage" /></td>
        </tr>
        <tr>
          <td colspan="1" rowspan="4">所获级别命名授予时间(年份) </td>
          <td colspan="5">国家级户外体育活动营地</td>
          <td colspan="3"><input type="text" v-model="dataform.getNationYear" /></td>
        </tr>
        <tr>
          <td colspan="5">省级户外体育活动营地</td>
          <td colspan="3"><input type="text" v-model="dataform.getProvinceYear" /></td>
        </tr>
        <tr>
          <td colspan="5">地市级户外体育活动营地</td>
          <td colspan="3"><input type="text" v-model="dataform.getCityYear" /></td>
        </tr>
        <tr>
          <td colspan="5">县级级户外体育活动营地</td>
          <td colspan="3"><input type="text" v-model="dataform.getCountyYear" /></td>
        </tr>
        <tr>
          <td colspan="1">指导教师总人数</td>
          <td colspan="2"><input type="text" v-model="dataform.teacherNum" /></td>
          <td colspan="2" rowspan="2">举办活动情况</td>
          <td colspan="2">年均举办次数</td>
          <td colspan="2"><input type="text" v-model="dataform.yearActivityNum" /></td>
        </tr>
        <tr>
          <td colspan="1">教练员总人数</td>
          <td colspan="2"><input type="text" v-model="dataform.coachNum" /></td>
          <td colspan="2">均参加学生数量</td>
          <td colspan="2"><input type="text" v-model="dataform.yearJoinPeopleNum" /></td>
        </tr>
        <tr>
          <td colspan="1" :rowspan="2 * dataform.fSheet5bList.length +1">已开展的项目
            <el-tooltip content="右键点击项目名称可以新增或删除项目" placement="top" effect="light" :open-delay="500">
              <span style="color: #666; font-size: 12px; cursor: help;">ⓘ</span>
            </el-tooltip>
          </td>
        <tr>
          <td colspan="2" rowspan="2" @contextmenu.prevent="showProjectContextMenu($event, 0)">
            <el-tooltip content="右键点击可以新增或删除项目" placement="top" effect="light" :open-delay="500">
              <div>项目1名称</div>
            </el-tooltip>
          </td>
          <td colspan="2" rowspan="2"><input type="text" v-model="dataform.fSheet5bList[0].sportName" /></td>
          <td colspan="2">指导教师数量</td>
          <td colspan="2"><input type="text" v-model="dataform.fSheet5bList[0].teacherNum" /></td>
        </tr>
        <tr>
          <td colspan="2">教练员数量</td>
          <td colspan="2"><input type="text" v-model="dataform.fSheet5bList[0].coachNum" /></td>
        </tr>
        <tr>
          <td colspan="2" rowspan="2" @contextmenu.prevent="showProjectContextMenu($event, 1)">
            <el-tooltip content="右键点击可以新增或删除项目" placement="top" effect="light" :open-delay="500">
              <div>项目2名称</div>
            </el-tooltip>
          </td>
          <td colspan="2" rowspan="2"><input type="text" v-model="dataform.fSheet5bList[1].sportName" /></td>
          <td colspan="2">指导教师数量</td>
          <td colspan="2"><input type="text" v-model="dataform.fSheet5bList[1].teacherNum" /></td>
        </tr>
        <tr>
          <td colspan="2">教练员数量</td>
          <td colspan="2"><input type="text" v-model="dataform.fSheet5bList[1].coachNum" /></td>
        </tr>
        <template v-for="(item, index) in dataform.fSheet5bList.slice(2)">
          <tr>
            <td colspan="2" rowspan="2" @contextmenu.prevent="showProjectContextMenu($event, index + 2)">
              <el-tooltip content="右键点击可以新增或删除项目" placement="top" effect="light" :open-delay="500">
                <div>项目{{ index + 3 }}名称</div>
              </el-tooltip>
            </td>
            <td colspan="2" rowspan="2"><input type="text" v-model="item.sportName" /></td>
            <td colspan="2">指导教师数量</td>
            <td colspan="2"><input type="text" v-model="item.teacherNum" /></td>
          </tr>
          <tr>
            <td colspan="2">教练员数量</td>
            <td colspan="2"><input type="text" v-model="item.coachNum" /></td>
          </tr>
        </template>
        </tr>
        <tr>
          <td colspan="1" :rowspan="totalActivityRows">参加的活动和获得的荣誉与奖励(自2008年起)</td>
          <td colspan="1" :rowspan="additionalNationalRows + 1">全国性</td>
          <td colspan="1">参加时间</td>
          <td colspan="6">比赛/活动名称、奖励和荣誉</td>
        </tr>
        <template v-for="(item, index) in dataform.fSheet5cList.filter(item => item.joinActivityTypeId === 1)">
          <tr>
            <td colspan="1">
              <el-tooltip content="右键点击可以新增或删除行" placement="top" effect="light" :open-delay="500">
                <input type="text" v-model="item.joinTime"
                  @contextmenu.prevent="showActivityContextMenu($event, index, 'national')" />
              </el-tooltip>
            </td>
            <td colspan="6">
              <el-tooltip content="右键点击可以新增或删除行" placement="top" effect="light" :open-delay="500">
                <input type="text" v-model="item.result"
                  @contextmenu.prevent="showActivityContextMenu($event, index, 'national')" />
              </el-tooltip>
            </td>
          </tr>
        </template>
        <tr>
          <td colspan="1" :rowspan="additionalProvincialRows + 1">省市级</td>
          <td colspan="1">参加时间</td>
          <td colspan="6">比赛/活动名称、奖励和荣誉</td>
        </tr>
        <template v-for="(item, index) in dataform.fSheet5cList.filter(item => item.joinActivityTypeId === 2)">
          <tr>
            <td colspan="1">
              <el-tooltip content="右键点击可以新增或删除行" placement="top" effect="light" :open-delay="500">
                <input type="text" v-model="item.joinTime"
                  @contextmenu.prevent="showActivityContextMenu($event, index, 'provincial')" />
              </el-tooltip>
            </td>
            <td colspan="6">
              <el-tooltip content="右键点击可以新增或删除行" placement="top" effect="light" :open-delay="500">
                <input type="text" v-model="item.result"
                  @contextmenu.prevent="showActivityContextMenu($event, index, 'provincial')" />
              </el-tooltip>
            </td>
          </tr>
        </template>
        <tr>
          <td colspan="1" :rowspan="additionalOtherRows + 1">其他活动</td>
          <td colspan="1">参加时间</td>
          <td colspan="6">比赛/活动名称、奖励和荣誉</td>
        </tr>
        <template v-for="(item, index) in dataform.fSheet5cList.filter(item => item.joinActivityTypeId === 3)">
          <tr>
            <td colspan="1">
              <el-tooltip content="右键点击可以新增或删除行" placement="top" effect="light" :open-delay="500">
                <input type="text" v-model="item.joinTime"
                  @contextmenu.prevent="showActivityContextMenu($event, index, 'other')" />
              </el-tooltip>
            </td>
            <td colspan="6">
              <el-tooltip content="右键点击可以新增或删除行" placement="top" effect="light" :open-delay="500">
                <input type="text" v-model="item.result"
                  @contextmenu.prevent="showActivityContextMenu($event, index, 'other')" />
              </el-tooltip>
            </td>
          </tr>
        </template>
        <tr>
          <td colspan="1" rowspan="14">详细情况(选填)</td>
          <td colspan="2">营地建成并投入使用情况</td>
          <td colspan="7"><input type="text" v-model="dataform.fSheet5dList[0].infoValue" /></td>
        </tr>
        <tr>
          <td colspan="2">营地所处位置，交通情况</td>
          <td colspan="7"><input type="text" v-model="dataform.fSheet5dList[1].infoValue" /></td>
        </tr>
        <tr>
          <td colspan="2">营地具有明显的地域特色或独特的季节性特征</td>
          <td colspan="7"><input type="text" v-model="dataform.fSheet5dList[2].infoValue" /></td>
        </tr>
        <tr>
          <td colspan="2">营地基本生活设施齐全</td>
          <td colspan="7"><input type="text" v-model="dataform.fSheet5dList[3].infoValue" /></td>
        </tr>
        <tr>
          <td colspan="2">营地周边有历史文化景观或工农业生产基地</td>
          <td colspan="7"><input type="text" v-model="dataform.fSheet5dList[4].infoValue" /></td>
        </tr>
        <tr>
          <td colspan="2">营地拥有可按扎 200个以上露营帐篷的开阔地带</td>
          <td colspan="7"><input type="text" v-model="dataform.fSheet5dList[5].infoValue" /></td>
        </tr>
        <tr>
          <td colspan="2">营地面积不小于6000平方米</td>
          <td colspan="7"><input type="text" v-model="dataform.fSheet5dList[6].infoValue" /></td>
        </tr>
        <tr>
          <td colspan="2">营地无自然灾害，安全有保证</td>
          <td colspan="7"><input type="text" v-model="dataform.fSheet5dList[7].infoValue" /></td>
        </tr>
        <tr>
          <td colspan="2">营地活动区活动开展情况以及活动特色</td>
          <td colspan="7"><input type="text" v-model="dataform.fSheet5dList[8].infoValue" /></td>
        </tr>
        <tr>
          <td colspan="2">营地露营区地理位置、环境卫生、安全警卫系统</td>
          <td colspan="7"><input type="text" v-model="dataform.fSheet5dList[9].infoValue" /></td>
        </tr>
        <tr>
          <td colspan="2">服务区提供户外活动必须物品的租赁及相关服务</td>
          <td colspan="7"><input type="text" v-model="dataform.fSheet5dList[10].infoValue" /></td>
        </tr>
        <tr>
          <td colspan="2">服务区的服务设施、休闲设施以及相关的附属设施</td>
          <td colspan="7"><input type="text" v-model="dataform.fSheet5dList[11].infoValue" /></td>
        </tr>
        <tr>
          <td colspan="2">营地配备户外体育活动指导员以及相关工作人员</td>
          <td colspan="7"><input type="text" v-model="dataform.fSheet5dList[12].infoValue" /></td>
        </tr>
        <tr>
          <td colspan="2">其他</td>
          <td colspan="7"><input type="text" v-model="dataform.fSheet5dList[13].infoValue" /></td>
        </tr>
      </tbody>
    </table>
    <div style="display: flex; justify-content: space-between;">
      <div>填表人：<input type="text" v-model="dataform.writePeople" /></div>
      <div>联系电话：<input type="text" v-model="dataform.writePhone" /></div>
    </div>
    <div style="display: flex; justify-content: space-between;">
      <div>填报时间：<input type="text" v-model="dataform.writeTime" /></div>
      <div>填报单位：<input type="text" v-model="dataform.orgName" /></div>
    </div>
    <!-- 添加右键菜单 -->
    <div v-show="showMenu" :style="menuStyle" class="context-menu">
      <template v-if="currentSection === 'project'">
        <div @click="addRow" class="menu-item">新增一个项目</div>
        <div @click="deleteRow" class="menu-item">删除这个项目</div>
      </template>
      <template v-else-if="currentSection === 'activity'">
        <div @click="addRow" class="menu-item">新增一行</div>
        <div @click="deleteRow" class="menu-item">删除这行</div>
      </template>
    </div>
  </div>
</template>

<script>
  import qs from 'qs'
  import {
    insert_update_sheet5
  } from '@/api/statistics.js'
  export default {
    props: {
      Alldata: {
        type: Object,
        default: {}
      },
    },
    data() {
      return {
        showbutton: true,
        dataform: {
          orgName: '',
          masterOrgName: '',
          intAddress: '',
          legalPerson: '',
          staticPhone: '',
          postcode: '',
          address: '',
          dayResponsibleName: '',
          dayResponsiblePhone: '',
          dayResponsibleEmail: '',
          campingType: '',
          campingCreateTime: '',
          campingAcreage: '',
          getNationYear: '',
          getProvinceYear: '',
          getCityYear: '',
          getCountyYear: '',
          teacherNum: '',
          coachNum: '',
          yearActivityNum: '',
          yearJoinPeopleNum: '',
          writePeople: '',
          writeTime: '',
          writePhone: '',
          fSheet5bList: [{
              sportName: '',
              teacherNum: '',
              coachNum: ''
            },
            {
              sportName: '',
              teacherNum: '',
              coachNum: ''
            },
            {
              sportName: '',
              teacherNum: '',
              coachNum: ''
            },
            {
              sportName: '',
              teacherNum: '',
              coachNum: ''
            },
            {
              sportName: '',
              teacherNum: '',
              coachNum: ''
            },
            {
              sportName: '',
              teacherNum: '',
              coachNum: ''
            },
            {
              sportName: '',
              teacherNum: '',
              coachNum: ''
            }
          ],
          fSheet5cList: [{
              joinActivityTypeId: 1,
              joinTime: '',
              result: ''
            },
            {
              joinActivityTypeId: 1,
              joinTime: '',
              result: ''
            },
            {
              joinActivityTypeId: 1,
              joinTime: '',
              result: ''
            },
            {
              joinActivityTypeId: 2,
              joinTime: '',
              result: ''
            },
            {
              joinActivityTypeId: 2,
              joinTime: '',
              result: ''
            },
            {
              joinActivityTypeId: 2,
              joinTime: '',
              result: ''
            },
            {
              joinActivityTypeId: 3,
              joinTime: '',
              result: ''
            },
            {
              joinActivityTypeId: 3,
              joinTime: '',
              result: ''
            },
            {
              joinActivityTypeId: 3,
              joinTime: '',
              result: ''
            }
          ],
          fSheet5dList: [{
              infoKey: '营地建成并投入使用情况',
              infoValue: ''
            },
            {
              infoKey: '营地所处位置，交通情况',
              infoValue: ''
            },
            {
              infoKey: '营地具有明显的地域特色或独特的季节性特征',
              infoValue: ''
            },
            {
              infoKey: '营地基本生活设施齐全',
              infoValue: ''
            },
            {
              infoKey: '营地周边有历史文化景观或工农业生产基地',
              infoValue: ''
            },
            {
              infoKey: '营地拥有可按扎 200个以上露营帐篷的开阔地带',
              infoValue: ''
            },
            {
              infoKey: '营地面积不小于6000平方米',
              infoValue: ''
            },
            {
              infoKey: '营地无自然灾害，安全有保证',
              infoValue: ''
            },
            {
              infoKey: '营地活动区活动开展情况以及活动特色',
              infoValue: ''
            },
            {
              infoKey: '营地露营区地理位置、环境卫生、安全警卫系统',
              infoValue: ''
            },
            {
              infoKey: '服务区提供户外活动必须物品的租赁及相关服务',
              infoValue: ''
            },
            {
              infoKey: '服务区的服务设施、休闲设施以及相关的附属设施',
              infoValue: ''
            },
            {
              infoKey: '营地配备户外体育活动指导员以及相关工作人员',
              infoValue: ''
            },
            {
              infoKey: '其他',
              infoValue: ''
            }
          ]

        },
        //营地类型 campingType 1自有 2租赁
        campingTypelist: {
          selfOwned: "",
          lease: "",
        },
        showMenu: false,
        menuStyle: {
          left: '0px',
          top: '0px'
        },
        currentSection: '',
        currentRowIndex: -1,
        currentActivityType: ''


      };
    },

    //更新数据
    watch: {
      Alldata(newValue, oldValue) {

        this.dataform = newValue
        if (this.dataform.campingType == 1) {
          this.campingTypelist.selfOwned = "√"
        }
        if (this.dataform.campingType == 2) {
          this.campingTypelist.lease = "√"
        }
      },



    },



    methods: {

      showbuut() {
        this.showbutton = false
      },


      submit() {
        if (this.campingTypelist.selfOwned) {
          this.dataform.campingType = 1
        } else if (this.campingTypelist.lease) {
          this.dataform.campingType = 2
        }


        // console.log(qs.stringify(this.dataform));
        insert_update_sheet5(this.dataform).then(res => {
          this.$message.success('填报成功')
        })
      },

      showProjectContextMenu(event, index) {
        this.showMenu = true
        this.currentSection = 'project'
        this.currentRowIndex = index
        this.menuStyle = {
          left: event.clientX + 'px',
          top: event.clientY + 'px'
        }
      },

      hideContextMenu() {
        this.showMenu = false
      },

      addRow() {
        if (this.currentSection === 'project') {
          // 项目添加逻辑保持不变
          const newProject = {
            sportName: '',
            teacherNum: '',
            coachNum: ''
          }
          this.dataform.fSheet5bList.push(newProject)
        } else if (this.currentSection === 'activity') {
          // 活动添加逻辑
          const newActivity = {
            joinActivityTypeId: this.currentActivityType === 'national' ? 1 : this.currentActivityType ===
              'provincial' ? 2 : 3,
            joinTime: '',
            result: ''
          }

          // 根据不同类型在不同位置插入
          let insertIndex = this.currentActivityType === 'national' ? 3 :
            this.currentActivityType === 'provincial' ? 6 : 9

          this.dataform.fSheet5cList.splice(insertIndex, 0, newActivity)
        }
        this.hideContextMenu()
      },

      deleteRow() {
        if (this.currentSection === 'project') {
          // 项目删除逻辑保持不变
          if (this.dataform.fSheet5bList.length > 1) {
            this.dataform.fSheet5bList.splice(this.currentRowIndex, 1)
          }
        } else if (this.currentSection === 'activity') {
          // 活动删除逻辑
          const currentTypeId = this.currentActivityType === 'national' ? 1 :
            this.currentActivityType === 'provincial' ? 2 : 3

          const currentTypeActivities = this.dataform.fSheet5cList.filter(item =>
            item.joinActivityTypeId === currentTypeId
          )

          if (currentTypeActivities.length > 1) {
            const indexToDelete = this.dataform.fSheet5cList.findIndex(item =>
              item === currentTypeActivities[this.currentRowIndex]
            )
            if (indexToDelete !== -1) {
              this.dataform.fSheet5cList.splice(indexToDelete, 1)
            }
          }
        }
        this.hideContextMenu()
      },

      showActivityContextMenu(event, index, type) {
        this.showMenu = true
        this.currentSection = 'activity'
        this.currentActivityType = type
        this.currentRowIndex = index
        this.menuStyle = {
          left: event.clientX + 'px',
          top: event.clientY + 'px'
        }
      }



    },

    // 将生命周期钩子移到正确的位置
    mounted() {
      document.addEventListener('click', this.hideContextMenu)
    },

    beforeDestroy() {
      document.removeEventListener('click', this.hideContextMenu)
    },

    computed: {
      additionalNationalRows() {
        return this.dataform.fSheet5cList.filter(item => item.joinActivityTypeId === 1).length
      },
      additionalProvincialRows() {
        return this.dataform.fSheet5cList.filter(item => item.joinActivityTypeId === 2).length
      },
      additionalOtherRows() {
        return this.dataform.fSheet5cList.filter(item => item.joinActivityTypeId === 3).length
      },
      totalActivityRows() {
        // 计算总行数：标题行(3) + 所有活动行数
        return 3 + this.additionalNationalRows + this.additionalProvincialRows + this.additionalOtherRows
      }
    },

  }
</script>

<style scoped>


  table {
    border-collapse: collapse;
    /* //合并为一个单一的边框 */
    border-color: #a2a7ab;
    /* //边框颜色按实际自定义即可 */
    margin-bottom: 10px;
  }

  thead tr th {
    background-color: #f8f8f9;
    /* //设置表格标题背景色 */
    padding: 3px;
    text-align: center;
  }

  tbody tr td {
    padding: 3px;
    text-align: center;
    height: 34px;
    /* //设置单元格最小高度 */
  }

 tbody tr td input {
    width: 99%;
    height: 95%;
    text-align: center;
    border: none;
    background: transparent;
  }
  input {
  border-bottom: 1px solid #000;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  outline: none;
  background: transparent;
  outline: medium;
}
  .context-menu {
    position: fixed;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 5px 0;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
  }

  .menu-item {
    padding: 8px 12px;
    cursor: pointer;
  }

  .menu-item:hover {
    background-color: #f5f5f5;
  }
</style>
